<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Grid</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/grid.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '0',
            label: 'node-0',
            x: 100,
            y: 100,
          },
          {
            id: '1',
            label: 'node-1',
            x: 250,
            y: 100,
          },
          {
            id: '2',
            label: 'node-2',
            x: 150,
            y: 350,
          },
          {
            id: '3',
            label: 'node-3',
            x: 420,
            y: 380,
          },
        ],
      };
      const grid = new Grid();
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        plugins: [grid],
        defaultNode: {
          size: [80, 40],
          shape: 'rect',
        },
        modes: {
          default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
        },
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
